<template>
    <div>
        <gestureVerify @successPwdSet="pwdSetSuccess"></gestureVerify>
        <p style="height:50px"  @click="selArea" >地区选择</p>
        <!--<pickerArea :pop-show="areaPick" @selAreaSuccess="successPicker" @selAreaCancel="cancelPicker"></pickerArea>-->
        <p style="height:50px"  @click="selArea" >二级城市联动选择</p>
        <!--<pickerAreaTwo :pop-show="areaPick" @selAreaSuccess="successPicker" @selAreaCancel="cancelPicker"></pickerAreaTwo>-->
        <sticky :stickyTop="scrollTop"></sticky>
        <p style="height:50px">刮刮乐奖金</p>
        <scratchCard @handleSuccessCard="coverClearSuccess"></scratchCard>
        <p style="height:50px">摇一摇中奖</p>
        <sharkOff></sharkOff>
        <p style="height:50px">视频播放组件</p>
        <videoPlayer></videoPlayer>
        <p style="height:50px">图片上传组件</p>
        <ul>
            <li v-for="img in imgList"><div class="album-bg-img"><img  :src='img.src'> </div></li>
        </ul>
        <div class="album">
            <imageUpload :img-arr.sync="imgList" @pickerSucess="successPicker"></imageUpload>
        </div>
        <p @click="visibleTimer=true">定时器开启</p>
        <timerTask :timerVisible="visibleTimer" @limitCancel="cancelLimit"></timerTask>
        <p style="height:50px">数字选择</p>
        <numberBox @numberBoxControl="controlNumber"></numberBox>
        <p style="height:50px">步骤条</p>
        <button @click="nextStep">下一步</button>
        <step v-model="step2" background-color='#fbf9fe'>
            <stepItem></stepItem>
            <stepItem></stepItem>
            <stepItem></stepItem>
        </step>
        <p style="height:50px">评分</p>
        <rater v-model="data41" slot="value" active-color="#04BE02"></rater>
        <p style="height:50px">预览</p>

        <preview></preview>
    </div>
</template>
<style lang="less" scoped>
    @import "./../../assets/css/variable_gather";
    @import "./../../assets/css/utilities/weui";
    .area--title{
        padding: .1rem 0;
        .font-dpr(16px);
    }
</style>
<script>
    import pickerArea from 'shared/components/picker_area'
    import pickerAreaTwo from 'shared/components/picker_area_two'
    import sticky from 'shared/components/sticky'
    import gestureVerify from 'shared/components/gesture_verify'
    import scratchCard from 'shared/components/scratch_card'
    import sharkOff from 'shared/components/shark_off'
    import videoPlayer from 'shared/components/video_player'
    import imageUpload from 'shared/components/upload/image_upload'
    import timerTask from 'shared/components/timer_task'
    import numberBox from 'shared/components/number_box'
    import step from 'shared/components/steps/step'
    import stepItem from 'shared/components/steps/step_item'
    import rater from 'shared/components/rater'
    import preview from 'shared/components/preview'
    export default{
        data(){
            return{
                areaPick: false,
                scrollTop: 50,
                imgList: [],
                visibleTimer: false,
                step1: 1,
                step2: 0,
                data41: 2.7
            }
        },
        components:{
            pickerArea,
            pickerAreaTwo,
            sticky,
            gestureVerify,
            scratchCard,
            sharkOff,
            videoPlayer,
            imageUpload,
            timerTask,
            numberBox,
            step,
            stepItem,
            rater,
            preview
        },

        computed:{
        },
        methods:{
            selArea() {
                this.areaPick = true;
            },
            successPicker(val){
                this.areaPick = false;
                console.log(val)
            },
            cancelPicker(){
                this.areaPick = false;
            },
            pwdSetSuccess(val) {
                console.log(val)
            },
            coverClearSuccess(val) {
                console.log(val)
            },
            successPicker(val) {
                console.log(val);
                this.imgList = val;
            },
            cancelLimit(val) {
                if(val){
                    this.visibleTimer = false
                }
            },
            controlNumber(val) {
                console.log(val)
            },
            nextStep () {
              this.step2 ++
            }
        },
        created(){

        },
        mounted(){

        }
    }
</script>
